<template>
	<view class="detail-container">
		<!-- 顶部状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 头部区域 -->
		<view class="header-section">
			<view class="header-bar">
				<view class="back-button" @click="goBack">
					<text class="back-icon"><</text>
				</view>
				<text class="header-title">待办详情</text>
				<view class="header-actions">
					<view class="header-action" @click="handleUpdate">
						<text class="action-text">保存</text>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="todo" class="content">
			<view class="form-area">
				<view class="form-item">
					<text class="label">标题</text>
					<input class="input" v-model="formData.title" placeholder="请输入标题" />
				</view>
				<view class="form-item">
					<text class="label">描述</text>
					<textarea class="textarea" v-model="formData.description" placeholder="请输入描述信息"></textarea>
				</view>
				<view class="form-item">
					<text class="label">创建时间</text>
					<text class="info-text">{{ todo.createTime }}</text>
				</view>
				<view class="form-item">
					<text class="label">状态</text>
					<switch :checked="formData.completed" @change="onSwitchChange" />
				</view>
			</view>
			
			<view class="button-group">
				<button class="save-button" @click="handleUpdate">保存修改</button>
				<button class="delete-button" @click="handleDelete">删除待办</button>
			</view>
		</view>
		<view v-else class="loading-state">
			<text>加载中或待办不存在...</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			todo: null,
			formData: {
				id: null,
				title: '',
				description: '',
				completed: false
			}
		}
	},
	onLoad(options) {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 0;
		
		const todoId = parseInt(options.id, 10);
		console.log('todoId', todoId);
		this.loadTodo(todoId);
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		async loadTodo(id) {
			try {
				// 使用API获取待办详情
				const { getTodoById } = await import('../../api/todo');
				const response = await getTodoById(id);
				
				if (response && response.code === 200 && response.data) {
					this.todo = response.data;
					this.formData = { ...response.data };
				} else {
					console.error('获取待办详情失败:', response);
					uni.showToast({
						title: '待办不存在或已被删除',
						icon: 'none',
						duration: 2000
					});
					// 延迟返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			} catch (error) {
				console.error('加载待办详情异常:', error);
				uni.showToast({
					title: '网络连接失败',
					icon: 'none',
					duration: 2000
				});
				// 延迟返回上一页
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		
		onSwitchChange(e) {
			this.formData.completed = e.detail.value;
		},
		
		async handleUpdate() {
			if (!this.formData.title.trim()) {
				uni.showToast({ title: '标题不能为空', icon: 'none' });
				return;
			}
			
			try {
				// 使用API更新待办
				const { updateTodo } = await import('../../api/todo');
				const updateData = {
					title: this.formData.title.trim(),
					description: this.formData.description.trim(),
					completed: this.formData.completed
				};
				
				const response = await updateTodo(this.formData.id, updateData);
				
				if (response && response.code === 200) {
					uni.showToast({ title: '更新成功', icon: 'success' });
					setTimeout(() => {
						uni.navigateBack();
					}, 800);
				} else {
					console.error('更新待办失败:', response);
					uni.showToast({
						title: response?.message || '更新失败',
						icon: 'none',
						duration: 2000
					});
				}
			} catch (error) {
				console.error('更新待办异常:', error);
				uni.showToast({
					title: '网络连接失败',
					icon: 'none',
					duration: 2000
				});
			}
		},
		
		handleDelete() {
			uni.showModal({
				title: '确认删除',
				content: '您确定要删除这个待办事项吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							// 使用API删除待办
							const { deleteTodo } = await import('../../api/todo');
							const response = await deleteTodo(this.todo.id);
							
							if (response && response.code === 200) {
								uni.showToast({ title: '删除成功', icon: 'success' });
								setTimeout(() => {
									uni.navigateBack();
								}, 800);
							} else {
								console.error('删除待办失败:', response);
								uni.showToast({
									title: response?.message || '删除失败',
									icon: 'none',
									duration: 2000
								});
							}
						} catch (error) {
							console.error('删除待办异常:', error);
							uni.showToast({
								title: '网络连接失败',
								icon: 'none',
								duration: 2000
							});
						}
					}
				}
			});
		}
	}
}
</script>

<style>
.detail-container {
	min-height: 100vh;
	height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding-bottom: env(safe-area-inset-bottom);
	display: flex;
	flex-direction: column;
}

.status-bar {
	background: transparent;
}

/* 头部区域 */
.header-section {
	padding: 20rpx;
}

.header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.back-button {
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 20rpx;
	backdrop-filter: blur(10rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
	transition: all 0.3s ease;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.back-button:active {
	background: rgba(255, 255, 255, 0.25);
	transform: scale(0.95);
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}

.back-icon {
	font-size: 32rpx;
	color: white;
	font-weight: 600;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

.header-title {
	color: white;
	font-size: 32rpx;
	font-weight: 600;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.header-action {
	padding: 12rpx 24rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 25rpx;
}

.action-text {
	color: white;
	font-size: 24rpx;
}

.content {
	background: white;
	border-radius: 30rpx 30rpx 0 0;
	margin: 0 20rpx;
	padding: 30rpx;
	flex: 1;
	overflow-y: auto;
}

.form-area {
	background-color: #f8f9fa;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 40rpx;
}

.form-item {
	margin-bottom: 30rpx;
}

.form-item:last-child {
	margin-bottom: 0;
}

.label {
	display: block;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 16rpx;
	font-weight: bold;
}

.input {
	width: 100%;
	height: 80rpx;
	padding: 0 20rpx;
	border: 1rpx solid #e5e5e5;
	border-radius: 10rpx;
	background-color: #f9f9f9;
	font-size: 28rpx;
}

.textarea {
	width: 100%;
	height: 200rpx;
	padding: 20rpx;
	border: 1rpx solid #e5e5e5;
	border-radius: 10rpx;
	background-color: #f9f9f9;
	font-size: 28rpx;
	resize: none;
}

.info-text {
	padding: 0 20rpx;
	line-height: 72rpx;
	font-size: 28rpx;
	color: #666;
}

.button-group {
	margin-top: 40rpx;
}

.save-button {
	width: 100%;
	height: 90rpx;
	background-color: #007AFF;
	color: #fff;
	border-radius: 50rpx;
	font-size: 32rpx;
	margin-bottom: 30rpx;
	border: none;
}

.delete-button {
	width: 100%;
	height: 90rpx;
	background-color: #fa3534;
	color: #fff;
	border-radius: 50rpx;
	font-size: 32rpx;
	border: none;
}

.loading-state {
	text-align: center;
	padding-top: 200rpx;
	color: #999;
}
</style> 